{% extends 'base.html' %}

{% block title %}综合看板{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">企业碳管理综合看板</h1>
    
    <div class="row">
        <!-- 年度碳排放趋势图表 -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title">年度碳排放趋势</h5>
                </div>
                <div class="card-body">
                    <div id="annualEmissionChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        
        <!-- 碳排放类别占比图表 -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title">碳排放类别占比</h5>
                </div>
                <div class="card-body">
                    <div id="categoryEmissionChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        
        <!-- 能源消耗统计图表 -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title">能源消耗统计</h5>
                </div>
                <div class="card-body">
                    <div id="energyConsumptionChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        
        <!-- 减排目标完成情况图表 -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title">减排目标完成情况</h5>
                </div>
                <div class="card-body">
                    <div id="emissionReductionChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<script>
    // 使用虚拟数据
    const annualEmissionData = {
        years: ['2020', '2021', '2022', '2023', '2024'],
        emissions: [12500, 13200, 12800, 11900, 11200]
    };
    
    const categoryEmissionData = {
        categories: ['化石燃料燃烧', '电力消耗', '热力消耗', '工业过程', '废弃物处理'],
        emissions: [6500, 3200, 1800, 1200, 800]
    };
    
    const energyConsumptionData = {
        types: ['煤炭', '天然气', '石油', '电力', '热力'],
        consumptions: [4200, 2800, 1500, 3800, 1200]
    };
    
    const emissionReductionData = {
        years: ['2020', '2021', '2022', '2023', '2024'],
        targets: [1000, 1200, 1500, 1800, 2000],
        actuals: [850, 1100, 1400, 1650, 1850]
    };

    // 初始化年度碳排放趋势图表
    const annualEmissionChart = echarts.init(document.getElementById('annualEmissionChart'));
    annualEmissionChart.setOption({
        title: { text: '年度碳排放趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: annualEmissionData.years },
        yAxis: { type: 'value', name: '碳排放量 (吨CO₂)' },
        series: [{
            data: annualEmissionData.emissions,
            type: 'line',
            smooth: true,
            lineStyle: { width: 3 },
            itemStyle: { color: '#3398DB' }
        }]
    });

    // 初始化碳排放类别占比图表
    const categoryEmissionChart = echarts.init(document.getElementById('categoryEmissionChart'));
    categoryEmissionChart.setOption({
        title: { text: '碳排放类别占比' },
        tooltip: { trigger: 'item' },
        legend: { 
            orient: 'horizontal',  // 改为水平方向
            bottom: 'bottom',      // 放在底部
            textStyle: { fontSize: 12 }  // 调整字体大小
        },
        series: [{
            name: '碳排放量',
            type: 'pie',
            radius: ['40%', '70%'],  // 使用内外半径设置环形图，增加空间
            avoidLabelOverlap: true,  // 避免标签重叠
            itemStyle: {
                borderRadius: 10,  // 圆角效果
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}: {d}%',  // 显示名称和百分比
                position: 'outside',  // 标签放在外部
                color: '#333',
                fontSize: 12
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: categoryEmissionData.categories.map((category, index) => ({
                value: categoryEmissionData.emissions[index],
                name: category
            }))
        }]
    });

    // 初始化能源消耗统计图表
    const energyConsumptionChart = echarts.init(document.getElementById('energyConsumptionChart'));
    energyConsumptionChart.setOption({
        title: { text: '能源消耗统计' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        xAxis: { type: 'category', data: energyConsumptionData.types },
        yAxis: { type: 'value', name: '消耗量 (吨标准煤)' },
        series: [{
            data: energyConsumptionData.consumptions,
            type: 'bar',
            itemStyle: { color: '#2ECC71' }
        }]
    });

    // 初始化减排目标完成情况图表
    const emissionReductionChart = echarts.init(document.getElementById('emissionReductionChart'));
    emissionReductionChart.setOption({
        title: { text: '减排目标完成情况' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['目标值', '实际值'] },
        xAxis: { type: 'category', data: emissionReductionData.years },
        yAxis: { type: 'value', name: '减排量 (吨CO₂)' },
        series: [
            {
                name: '目标值',
                type: 'line',
                data: emissionReductionData.targets,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: { width: 2, type: 'dashed' },
                itemStyle: { color: '#9B59B6' }
            },
            {
                name: '实际值',
                type: 'line',
                data: emissionReductionData.actuals,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: { width: 2 },
                itemStyle: { color: '#E74C3C' }
            }
        ]
    });

    // 响应式调整图表大小
    window.addEventListener('resize', function() {
        annualEmissionChart.resize();
        categoryEmissionChart.resize();
        energyConsumptionChart.resize();
        emissionReductionChart.resize();
    });
</script>
{% endblock %}